<!--
 * @Author: your name
 * @Date: 2021-03-18 09:30:29
 * @LastEditTime: 2021-03-23 15:44:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \src\html\list.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/footer.css">
</head>

<body>
    <!-- 顶部 -->
    <div id="top">
    </div>
    <!-- 搜索 -->
    <div id="search">
        <div class="container">
            <div class="logo fl"></div>
            <div class="sea fl">
                <input type="search" placeholder="请输入道具进行搜索" class="fl">
                <button class="fl">
                    <i class="iconfont icon-41"></i>
                </button>
            </div>
            <div class="lol fr"></div>
        </div>
    </div>
    <!-- 菜单 -->
    <div id="menu">
        <div class="container">
            <ul class="fl">
                <li>
                    <a href="##">首页</a>
                </li>
                <li>
                    <a href="##">商品列表</a>
                </li>
                <li>
                    <a href="##">活动专区</a>
                </li>
                <li>
                    <a href="##">限时折扣</a>
                </li>
                <li>
                    <a href="##">聚豆乐园</a>
                </li>
                <li>
                    <a href="##">周边商城</a>
                </li>
                <li>
                    <a href="##">个人中心</a>
                </li>
            </ul>
            <!-- 购物车 -->
            <div class="shopcar fl">
                <a href="##" class="fl">
                    <i class="iconfont icon-gouwuche"></i>
                    购物车
                </a>
                <span class="fl">(0)</span>
            </div>
        </div>
    </div>
    <!-- 选项卡 -->
    <div id="nav">
        <div class="container">
            <ul>
                <li>
                    <a href="##">全部分类</a>
                </li>
                <li>
                    <a href="##">英雄</a>
                </li>
                <li>
                    <a href="##">表情</a>
                </li>
                <li>
                    <a href="##">海克斯及其他</a>
                </li>
                <li>
                    <a href="##">云顶之弈</a>
                </li>
                <li>
                    <a href="##">皮肤</a>
                </li>
                <li>
                    <a href="##">道具</a>
                </li>
                <li>
                    <a href="##">守卫眼皮肤</a>
                </li>
                <li>
                    <a href="##">道具包</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 内容区 -->
    <div id="content">
        <div class="container">
            <!-- 分页标记 -->
            <p class="con_p">
                <span>您现在的位置：</span>
                <span>英雄联盟 ></span>
                <span>英雄</span>
            </p>
            <!-- 左边 -->
            <div class="con_left fl">
                <div>
                    <h4>热门排行</h4>
                    <ul class="list_template">


                    </ul>
                </div>
                <div>
                    <h4>周边商城</h4>
                    <ul class="list2_template">

                    </ul>
                    <a href="##">更多</a>
                </div>
            </div>
            <!-- 右边 -->
            <div class="con_right fr">
                <div>
                    <p>
                        关键字：
                        <input type="search"> 价格区间(QB)：
                        <input type="text"> -
                        <input type="text">
                        <a href="##" class="fr">确定</a>
                    </p>
                    <p>
                        <span>上架时间</span>
                        <span>销量
                            <i class="iconfont icon-xia"></i>
                        </span>
                        <span>价格
                            <i class="iconfont icon-xia"></i>
                        </span>
                        <span>
                            <input type="checkbox">显示未拥有
                            <input type="checkbox">显示已拥有
                        </span>
                    </p>
                </div>
                <div>
                    <ul class="list3_template">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div id="footer">
    </div>
    <!-- 左边-上边列表 -->
    <script type="text/html" id="lt">
        {{ each listOne item index}}
        
        <li>
            <img src="{{item.img}}" alt="" class="fl">
            <p class="fr">
                <span>{{item.title}}</span>
                <span>Q币价:
                    <span>{{item.price}}</span> Q币</span>
                <span>微信价:￥
                    <span>{{(item.price*0.9).toFixed(2)}}</span>
                </span>
            </p>
            <div>
                <p>{{index+1 <10 ? '0'+(index+1):index+1}}</p>
            </div>
        </li>
        {{/each}}
    </script>
    <!-- 左边-下边列表 -->
    <script type="text/html" id="mt">
        {{each list item}}
        <li>
            <img src="{{item.img}}" alt="">
            <p>{{item.title}}</p>
            <span>￥{{item.price}}</span>
        </li>
        {{/each}}
    </script>
    <!-- 右边列表 -->
    <script type="text/html" id="ht">
        {{each data item}}
            {{if $index < 20}}
            <li listId="{{item.id}}">
                <i class="iconfont icon-tubiao lx_one"></i>
                <img src="{{item.image}}" alt="">
                <h5>{{item.title}}</h5>
                <p>Q币价：
                    <span>{{item.price}}</span>
                </p>
                <p>微信价：
                    <span>￥{{(item.price *0.95).toFixed(2)}}</span>
                </p>
                <p class="shopping">加入购物车</p>
                <i class="iconfont icon-tubiao lx_two"></i>
            </li>
            {{/if}}
        {{/each}}
    </script>
    <script src="../lib/require/require.js" data-main="../js/list"></script>

</body>

</html>